<template>
	<!-- 搜索框 -->
	<view class="search-box" :class="{ focus: isFocus }">
		<input @focus="focusHandler" @blur="isFocus = false" type="text" placeholder="搜索" />
		<icon type="search" size="20"></icon>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				// 控制类名切换的标记
				isFocus: false,
			}
		},
		methods:{
			focusHandler(){
				// console.log('focusHandler')
				this.isFocus = true
				// 跳转页面
				uni.navigateTo({
					url:"/pages/search/search"
				})
			}
		}
	}
</script>

<style lang="less">
	// 搜索区域
	.search-box {
		background-color: #fe2c4b;
		padding: 20rpx;
		position: relative;
		input {
			background-color: white;
			padding-left: 50%;
			border-radius: 10rpx;
			transition: 0.3s;
		}
		icon {
			position: absolute;
			top: 25rpx;
			left: 42%;
			transition: 0.3s;
		}
		// 当search-box 有focus的时候 input 和icon 就有生效的样式
		// .search-box.focus
		&.focus {
			input {
				padding-left: 60rpx;
			}
			icon {
				left: 4%;
			}
		}
	}
</style>
